<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: url("images/login.jpg") center / cover no-repeat; /* 简化背景样式 */
        }
    </style>
    <script src="js/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="css/self.css">
</head>
<body>
<div class="container">
    <h1>注册</h1>
    <form id="form-reg" onsubmit="event.preventDefault();"> <!-- 阻止表单默认提交 -->
        <input type="text" name="username" id="userName" placeholder="请输入用户名" required>
        <input type="password" name="password" id="userPwd" placeholder="请输入密码" required>

        <button type="button" id="btn-reg">立即注册</button>
        <a href="login.html" style="float: right; color: #000;">已有账号？去登录</a>
    </form>
</div>

<script type="text/javascript">
    $("#btn-reg").click(function() {
        const formData = $("#form-reg").serialize();
        if (!formData) { // 简单检查表单数据是否为空
            alert("请填写所有必填项");
            return;
        }
        console.log($("#form-reg").serialize());
        $.ajax({
            type: "POST",
            url: "/users/reg",
            data:{
                username: $("#userName").val(),
                password: $("#userPwd").val()
            },
            success: function(json) {
                if (json.state === 200) {
                    alert("注册成功");
                    window.location.href = "login.html";
                } else {
                    alert(json.message || "注册失败，未知错误");
                }
            },
            error: function(xhr, textStatus, errorThrown) {
                let errorMsg = "注册失败";
                if (xhr.status === 4000) errorMsg += "，用户名已被占用";
                else if (xhr.status === 5000) errorMsg += "，服务器内部错误";
                else errorMsg += `，错误代码：${xhr.status}`;
                alert(errorMsg);
            }
        });
    });
    // var formData = $("#form-reg").serializeArray();
    // var jsonData = {};
    // $.each(formData, function() {
    //     jsonData[this.name] = this.value;
    // });
    // var jsonString = JSON.stringify(jsonData);
    //
    // $.ajax({
    //     type: "POST",
    //     url: "/users/reg",
    //     dataType: "json",
    //     contentType: "application/json; charset=utf-8",
    //     data: jsonString,
    //     success: function(json) {
    //         if (json.state === 200) {
    //             alert("注册成功");
    //             window.location.href = "login.html";
    //         } else {
    //             alert(json.message || "注册失败，未知错误");
    //         }
    //     },
    //     error: function(xhr, textStatus, errorThrown) {
    //         let errorMsg = "注册失败";
    //         if (xhr.status === 4000) errorMsg += "，用户名已被占用";
    //         else if (xhr.status === 5000) errorMsg += "，服务器内部错误";
    //         else errorMsg += `，错误代码：${xhr.status}`;
    //         alert(errorMsg);
    //     }
    // });

</script>
</body>
</html>
